.md-text .tag-plugin.note
  position: relative
  padding: 0.25rem 1rem
  border-radius: $border-card
  background: var(--theme-block)
  overflow: hidden
  if hexo-config('tag_plugins.note.border') == true
    border: 1px solid var(--theme-border)
  color: var(--text-p1)
  >.title
    --fsp: $fsp1
    font-size: var(--fsp)
    line-height: 1.5
    margin-top: var(--gap-p-compact)
    font-weight: 500
    color: var(--text)
  >.body
    &,p
      --fsp: $fsp2
      font-size: var(--fsp)
      line-height: 1.5
    margin-top: var(--gap-p-compact)
    margin-bottom: var(--gap-p-compact)
  >.body:only-child
    margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0


.md-text .tag-plugin.note[color]
  code
    background: none
.md-text .tag-plugin.note:not([color])
  .highlight
    background: var(--block-hover)
.md-text .tag-plugin.note[child=codeblock]
  padding: 0
  background: var(--theme-codeblock)
  >.title, >.body:only-child
    margin-top: 0
  >.body
    margin-bottom: 0
  .highlight
    margin: 0
    border: none
    background: none
    figcaption
      span
        background: var(--theme-block)
  .highlight+.highlight
    border-top: 1px dashed var(--theme-border)
    border-top-left-radius: 0
    border-top-right-radius: 0

.md-text .tag-plugin.note[child=tabs]
  >.body
    margin: 0
    >.tabs
      margin-top: .5rem

.md-text .tag-plugin.note[child=iframe]
  padding: 0
  >.body
    margin: 0
    iframe
      margin: 0


.md-text .tag-plugin .tag-plugin.note
  --gap-p: 1rem
